<!--vue模板-->
<template>
  <div>
    <div style="border: #fff solid 1px;background-color: #fff; ">
      <el-form style="margin-top: 15px;" :model="customer">
        <el-row>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="客户ID :">
              <el-input v-model="customer.id" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="客户公司 :">
              <el-input v-model="customer.company" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="联系人 :">
              <el-input v-model="customer.contactName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="联系方式 :">
              <el-input v-model="customer.mobile" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="邮箱 :">
              <el-input v-model="customer.customer_email" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="感兴趣产品 :">
              <el-input v-model="customer.interestProduct" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="国家 :">
              <el-input v-model="customer.country" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="市场 :">
              <el-input v-model="customer.market" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="客户分类 :">
              <el-select placeholder="请选择 内销、外销">
                <el-option v-model="customer.cid" v-for="item in marketOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="客户类型 :">
              <el-select placeholder="请选择 内销、外销">
                <el-option v-model="customer.customer_type" v-for="item in marketOptions" :key="item.value"
                  :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" style="margin-left: 10px;">
            <el-form-item label="所属销售 :">
              <el-select placeholder="请选择 内销、外销">
                <el-option v-model="customer.saleId" v-for="item in marketOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-button style="margin-left: 100px;" type="primary" @click="initData">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-row>
      </el-form>
    </div>
    <!--功能按钮-->
    <div style="text-align: right;">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <!--客户列表-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="index" label="行号" width="80" header-align="center" align="center" />
      <el-table-column prop="company" label="客户公司名称" width="150" header-align="center" />
      <el-table-column prop="contactName" label="联系人" width="80" header-align="center" />
      <el-table-column prop="mobile" label="联系方式" width="150" header-align="center" />
      <el-table-column prop="market" label="市场" width="80" header-align="center" />
      <el-table-column prop="customer_type" label="客户类型" width="120" header-align="center" />
      <el-table-column prop="customer_email" label="邮箱" width="150" header-align="center" />
      <el-table-column prop="createTime" label="创建时间" width="150" header-align="center" />
      <el-table-column prop="saleId" label="所属销售" width="120" header-align="center" />
      <el-table-column prop="source" label="来源" width="120" header-align="center" />
      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{ row }">
          <el-button type="primary" :icon="Edit" circle title="修改" @click="update(row.id)" />
          <el-button type="primary">下单记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div style="background-color: #fff; height: 50px; line-height: 50px;">
      <el-pagination background :page-size="pageSize" layout="total,sizes,prev, pager, next, jumper" :total="total"
        @size-change="chgsize" @current-change="chgpg" />
    </div>
  </div>
</template>

<!--vue组件选项定义-->
<script setup>
import { ref, onMounted } from "vue";
//引入 图标
import { Delete, Edit } from '@element-plus/icons-vue'
//引入api
import { queryCustomer } from "@/api/customer.js";
//引入路由
import { useRouter } from "vue-router";
//表格数据
const tableData = ref([{ company: "ss" }]);
//路由实例
const router = useRouter();
//添加客户
function add() {
  router.push("/customer/add");
}
//市场选项
const marketOptions = [
  {
    label: "内销",
    value: 1
  },
  {
    label: "外销",
    value: 2
  }
];
//搜索条件
const customer = ref({
  company: "",
  id: "",
  contactName: "",
  mobile: "",
  customer_email: "",
  interestProduct: "",
  country: "",
  market: "",
  cid: "",
  customer_type: "",
  saleId: ""
});
//重置
function reset() {
  customer.value = {
    company: "",
    id: "",
    contactName: "",
    mobile: "",
    customer_email: "",
    interestProduct: "",
    country: "",
    market: "",
    cid: "",
    customer_type: "",
    saleId: ""
  };
  initData();
}
//分页信息
const page = ref(1);//当前页 默认第一页
const pageSize = ref(10);//每页记录数
const total = ref(0);//总记录数

//每页记录数的变更
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从第一页开始查
  page.value = 1;
  //查询数据
  initData();
};
//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
};
//修改
function update(id) {
  router.push({ path: "/customer/update", query: { id } })
}
//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    //条件查询
    company: customer.value.company,
    id: customer.value.id,
    contactName: customer.value.contactName,
    mobile: customer.value.mobile,
    customer_email: customer.value.customer_email,
    interestProduct: customer.value.interestProduct,
    country: customer.value.country,
    market: customer.value.market,
    cid: customer.value.cid,
    customer_type: customer.value.customer_type,
    saleId: customer.value.saleId
  };
  let res = await queryCustomer(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接受分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}
//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<!--vue样式 scoped 当前样式只适用于当前组件-->
<style scoped></style>
